import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


const state = {
  templateName: '',
  myResume: {},
}
const mutations = {
  // 设置当前使用的模板名称
  setCurrentTemplateName(state, templateName) {
    state.templateName = templateName
  },
  // 设置当前使用的简历名称
  setResumeTitle(state, resumeTitle) {
    state.myResume.resumeTitle = resumeTitle
    localStorage.setItem(
      `${state.templateName}`,
      JSON.stringify(state.myResume)
    )
  },
  // 更新模块信息
  setModule(state, { props, id }) {
    console.log(props,id);
    if (state.templateName === 'TemplateTopAndBottom') {
      state.myResume.moduleList.some((item) => {
        if (item.id === id) {
          item.props = props
          return
        }
      })
      localStorage.setItem(
        `${state.templateName}`,
        JSON.stringify(state.myResume)
      )
    } else {
      state.myResume.rightModuleList.some((item) => {
        if (item.id === id) {
          item.props = props
          return
        }
      })
      state.myResume.leftModuleList.some((item) => {
        if (item.id === id) {
          item.props = props
          return
        }
      })
      localStorage.setItem(
        `${state.templateName}`,
        JSON.stringify(state.myResume)
      )
    }
  },
  // 移除模块信息
  removeModule(state, id) {
    if (state.templateName === 'TemplateTopAndBottom') {
      state.myResume.moduleList.some((item, index) => {
        if (item.id === id) {
          state.myResume.moduleList.splice(index, 1)
          return
        }
      })
      localStorage.setItem(state.templateName, JSON.stringify(state.myResume))
    } else {
      state.myResume.leftModuleList.some((item, index) => {
        if (item.id === id) {
          state.myResume.leftModuleList.splice(index, 1)
          return
        }
      })
      state.myResume.rightModuleList.some((item, index) => {
        if (item.id === id) {
          state.myResume.rightModuleList.splice(index, 1)
          return
        }
      })
      localStorage.setItem(state.templateName, JSON.stringify(state.myResume))
    }
  },
  // 更新简历信息
  setResumeInfo(state, { templateName, resumeInfo }) {
    state.myResume = resumeInfo
    localStorage.setItem(templateName, JSON.stringify(resumeInfo))
  },
  // 更新简历字体
  setFontSize(state, fontSize) {
    state.myResume.fontSize = `${fontSize}px`
    localStorage.setItem(`${state.templateName}`, JSON.stringify(state.myResume))
  },

  // 更新简历主题颜色
  setThemeColor(state, newColor) {
    state.myResume.themeColor = newColor
    localStorage.setItem(`${state.templateName}`, JSON.stringify(state.myResume))
  }
}
const actions = {}
const getters = {
  myFontSize() {
    return state.myResume.fontSize || '16px'
  },
  myThemeColor() {
    return state.myResume.themeColor || 'rgb(94,142,224)'
  },
  myResumeTitle() {
    return state.myResume.resumeTitle || '应聘岗位_姓名_学历_经验'
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
})
